<!doctype html>
<html>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script type="text/javascript">
    document.documentElement.style.fontSize = window.innerWidth / 10 + 'px';
    </script>
    <title>ElloGame - SPACE X</title>
    <link rel="stylesheet" type="text/css" href=" assets/stylesheets/styles.css">
    <link rel="stylesheet" href=" assets/stylesheets/main.css">
    <style type="text/css">
        .logo img{width: 70%;z-index: 1;position: relative;}
        .logo .game-bg{
            position: absolute;
            top:-1rem;
            left: 0;
            width: 100%;
            z-index: 0;
        }
        .game{width:100%;height: 100%;background:url( spacex/imgs/bg.png);background-size: cover } 
        .score{text-align: center;position: absolute;color:#fff;padding:10px;}
        canvas{position: absolute}
        #loadscene{z-index:99999999}
    </style>
    <script src="assets/js/jquery-3.1.1.min.js"></script>
    <style type="text/css"></style>  
</head>

<body>

<div class="game-ui">
    <div class="result">
        <p id = "rank1" >您吃掉的个数</p>
        <div id = "score"></div>
        <p id="rank2"></p>
    </div>
    <div id = "uistart">
        <i id="start" class="icon icon-play"></i>
    </div>
    <div class="logo">
        <img class="game-logo" src="assets/gameassets/spacex/logo.png">
        <img class="game-bg" src="assets/gameassets/spacex/game_bg.png" alt="">
    </div>
    <div id = "uiend">
        <i id="loadscene" class="icon circle icon-restart"></i>
    </div>
</div>
<div class="score">
	<p>当前分数:<span id="scorll">0</span></p>
	<p>生命值：<span id="life"></span></p>
</div>
		
<div class="game">
	<canvas id="canvas3" tabindex="0"></canvas>
    <canvas id="canvas" tabindex="0"></canvas>
    <canvas id="canvas2" tabindex="0"></canvas>
</div>
<div class="tip_img_box">
    <img src="assets/img/hp.png" alt="" class="show_hengping">
    <img src="assets/img/sp.png" alt=""  class="show_shuping">
</div>
  
    <script src="assets/js/elloturn2.js"></script>
    <script>
         var canvas=document.getElementById("canvas");
    var w=$('body').width();   
    var h=$('body').height();   
    canvas.width=w;
    canvas.height=h;
    canvas.style.border="1px solid";

    var cotx=canvas.getContext("2d");

    var canvas2=document.getElementById("canvas2");
    canvas2.width=w;
    canvas2.height=h;

    var cotx2=canvas2.getContext("2d");


    var canvas3=document.getElementById("canvas3");
    canvas3.width=w;
    canvas3.height=h;

    var cotx3=canvas3.getContext("2d");


    var img=new Image();              //定义大炮图片
    img.src=" spacex/imgs/dapao.png";

    
    $(function(){
        initHandle();
        gameAction.gameInit();
        
        var start = document.getElementById("start");
        var uiend = document.getElementById("uiend");
        var score = document.getElementById("score"); 
        var uistart = document.getElementById("uistart");
        
        var losetimer = 0;
        var showEndUI = false;
        window.lost=false;
        start.addEventListener('click',function(event){
            $('#uiend').hide();
            
            var start = true;
            
            gameAction.start();
            score.style.display = "block";
            uistart.style.display = "none";
            Init();
        });
        again.addEventListener('click',function(event){
            $('#uiend').hide();
            var start = true;
            
            gameAction.start();
            score.style.display = "block";
            uistart.style.display = "none";
            Init();
        });
    })
    Init = function(){
        losetimer = 0;
        showEndUI = false;
        $('.game').show();
    };
    function draw(sd){              //绘制大炮
        cotx2.save();
        cotx2.beginPath();
        cotx2.translate(w/2,h);
        cotx2.rotate(-sd);
        cotx2.drawImage(img,-50,-100,100,200);
        cotx2.restore();
    }
    draw()     
    canvas2.onmousemove=function(e){
      var mouseX=e.clientX,
          mouseY=e.clientY,
          bodyW=document.body.clientWidth/2,
          bodyH=document.body.clientHeight;
          
      var degs=Math.atan((bodyW-mouseX)/(bodyH-mouseY));
      cotx2.clearRect(0,0,canvas2.width,canvas2.height);
      draw(degs);
    }

    var colors=["yellow","black","blue","red","green"]

    function drawball(ball){
      cotx.beginPath();
      cotx.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
      cotx.fillStyle=ball.color;
      cotx.fill();
    }

    var balls=[];
    var tim=0;           
    var on=true;         //开关

    var clicks=true;

    function moveBall(){               //球的移动
      cotx.clearRect(0,0,canvas.width,canvas.height);
      for(var i=0;i<balls.length;i++){
        balls[i].x+=balls[i].vx;
        balls[i].y+=balls[i].vy;
        
        balls.index=i;
        if(balls[i].x<-10||balls[i].x>canvas.width+10||balls[i].y<-10){
          balls.splice(balls[i].index,1);
          continue;
        }
        
        drawball(balls[i]);
        
      }
    }

    canvas2.onclick=function(e){                //点击发射小球
      var num=Math.floor(Math.random()*colors.length);
      if(clicks){
        var spex=document.body.clientWidth/2-e.clientX,
          spey=document.body.clientHeight-e.clientY;
      var ball={                    //定义球对象
        x:w/2,
        y:h,
        r:20,
        vx:-spex/10,
        vy:-spey/10,
        color:colors[num]
      }
      balls.push(ball);
      
      
      if(on){
        clearInterval(tim)
        tim=setInterval(function(){
        moveBall()
        },20);
        on=false;
      }
      
      if(!balls.length){
        clearInterval(tim);
        on=true;
      }
      clicks=false;
        setTimeout(function(){clicks=true},300)      
      }
      
    }

    var img2=new Image();                            //定义怪物图片
        img2.src=" spacex/imgs/circle.png"
    function drawRect(rect){                          //绘制怪物
      cotx3.beginPath();
      cotx3.drawImage(img2,rect.x,rect.y,70,70);
    }
    var rects=[];                            //存放怪物的数组

    function Rect(){                               //怪物制作
      var rect={
        x:Math.random()*(canvas3.width-50),
        y:-Math.random()*500-100,
        vy:2
      }
      if(rects.length<4){
        rects.push(rect);
      }
      moveRect();
      
    }

    function moveRect(){                        //怪物移动
      cotx3.clearRect(0,0,canvas3.width,canvas3.height);
      for(var i=0;i<rects.length;i++){
        if(numbers>190){      //分数大于190加速  level1
          rects[i].vy=3;
        }
        if(numbers>1000){      //分数大于1000加速  level2
          rects[i].vy=4;
        }
        if(numbers>2000){      //分数大于2000加速  level3
          rects[i].vy=6;
        }
        rects[i].y+=rects[i].vy;
        rects[i].index=i;
        if(rects[i].y>canvas3.height){   //超出范围清除
          rects.splice(rects[i].index,1);
          ming--;   //生命次数减一
          life.innerText=ming;
          if(ming==0){
            gameover();
          }
          continue;
        }
        for(var j=0;j<balls.length;j++){                      //实现碰撞
          if(Math.abs(balls[j].x-rects[i].x)<50&&Math.abs(balls[j].y-rects[i].y)<50){
            rects.splice(rects[i].index,1);       //清除怪
            balls.splice(balls[j].index,1);       //清除球
            
            numbers+=10; //每次碰撞加十分
            scorll.innerText=numbers;
          }
        }
        drawRect(rects[i]);
      }
    }


    //开始新游戏
    var numbers=0;  //定义得分
    var ming=5;    //5次机会

    var scorll=document.getElementById("scorll");
    var life=document.getElementById("life");
    var gameoved=document.getElementById("score");

    life.innerText=ming;

    //游戏结束
    function gameover(){
      $('#uiend').show();
      $('#loadscene,#rank1,#rank2').show();
      $('.game-ui').show();
      $('.logo').hide();
      gameoved.innerText=numbers;
      clearInterval(timers);
      $('#camvas2').css('pointer-events','none');
    }
    var timers=0;           //定义循环timers
    

    start.onclick=function(){
      clearInterval(timers);
      scorll.innerText=0;
      life.innerText=5;
      rects=[];
      timers=setInterval(function(){
        Rect();
      },20);
    }
    var again = document.getElementById("loadscene");
    again.onclick=function(){
      clearInterval(timers);
      scorll.innerText=0;
      life.innerText=5;
      rects=[];
      timers=setInterval(function(){
        Rect();
      },20);
    }
    </script>
</body>

</html>
